<template>

  <div class="deposit_bar">
    <img src="/assets/images/deposit1.png" alt="">
    <div class="deposit_bar__content">公告：未满18岁的未成年人请勿消费</div>
  </div>
  <div class="deposit_bar_large">
    <img src="/assets/images/deposit2.png" alt="">
    <div class="deposit_bar_large__title">
      <span>账户余额：￥ 99.00</span>
    </div>
  </div>
  <div class="deposit_bar_large">
    <img src="/assets/images/deposit2.png" alt="">
    <div class="deposit_bar_large__title">
      <span>用户：张三</span>
    </div>
  </div>

  <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">分割线</van-divider>

  <van-form class="form">
    <van-field 
        v-model="business.money"
        label="充值金额"
        name="money"
        placeholder="请填写充值金额"
        left-icon="gold-coin-o"
        required
        :rules="[{ required: true, message: '请填写充值金额' }]"
    />

    <div class="button">
      <van-button round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit">立即充值</van-button>
    </div>
  </van-form>

  <van-number-keyboard @input="PayInput" :show="true" close-button-text="完成" />

  <Tabbar />
</template>

<script setup>

  let business = ref({
    money: ''
  })

  const PayInput = (values) => business.value.money += `${values}`
</script>

<style scoped>
  @import url('/assets/css/BusinessPay.css');
</style>